<template>
  <el-select v-model="selected" @input="selectInput">
    <el-option
      v-for="item in options"
      :key="item.id"
      :value="item.id"
      :label="item.BankName"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: [Number, String],
    sid: Number,
    model: Array,
  },
  data() {
    return {
      selected: this.value,
      options: this.model,
    };
  },
  watch: {
    value(newValue) {
      console.log(newValue);
      this.value = newValue;
    },
    sid(newValue) {
      console.log(newValue);
      this.sid = newValue;

      this.selected = this.value;
      this.getList();
    },
  },
  created() {
    if (this.sid) {
      this.getList();
    }
  },
  methods: {
    async getList() {
      if (!this.sid) {
        return;
      }
      const response = await this.$http.get(
        `/api/recharge/GetServiceBank?sid=${this.sid}`
      );
      // console.log(response);
      this.options = response.data.Data.paychannellist;
    },
    selectInput(e) {
      this.$emit("input", e);
    },
  },
};
</script>

<style></style>
